<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<include file="Widget/head" />
	<script src="__JS__/jquery.validate.min.js"></script>
	<script src="__JS__/jquery.form.js"></script>
	<style type="text/css">
	label.error {color:red;}
	</style>
</head>
<body>
<include file="Widget/menu" />

<div class="join_banner"></div>

<div class="login">
	<div class="sitewidth">
		<div class="loginbox row">
				<div id="formErr" class="alert alert-dismissible alert-danger" style="display: none;"></div>
				<form class="form-horizontal" method="post" id="regform" action="{:U('Index/findpwd')}">
					<fieldset>
						<legend>找回密码</legend>
						<div class="form-group">
							<label for="account" class="col-lg-3 control-label">帐号：</label>
							<div class="col-lg-9">
								<input type="text" class="form-control" id="account" name="account"
									placeholder="请输入用户名" value="{$mydata['account']}">
							</div>
						</div>
						<div class="form-group">
							<label for="mobile" class="col-lg-3 control-label">手机号码：</label>
							<div class="col-lg-9">
								<input type="text" class="form-control" id="mobile" name="mobile"
									placeholder="请输入手机号码" value="{$mydata['mobile']}">
							</div>
						</div>
						<div class="form-group">
							<label for="phoneverify" class="col-lg-3 control-label">手机验证码：</label>
							<div class="col-lg-4">
								<input type="text" class="form-control" id="phoneverify" name="phoneverify"
									placeholder="请输入手机验证码">
							</div>
							<div class="col-lg-5">
								<button id="sendvf" class="btn btn-info" style="width:100%;">点击获取验证码</button>
							</div>
						</div>
						<div class="form-group">
							<label for="inputPassword" class="col-lg-3 control-label">新密码：</label>
							<div class="col-lg-9">
								<input type="password" class="form-control" id="inputPassword" name="password"
									placeholder="请输入密码">
							</div>
						</div>
						<div class="form-group">
							<label for="inputrePassword" class="col-lg-3 control-label">确认密码：</label>
							<div class="col-lg-9">
								<input type="password" class="form-control" id="inputrePassword" name="repassword"
									placeholder="请确认密码">
							</div>
						</div>
						<div class="form-group myformtxt">
							<div class="col-lg-12 ">
								<label style="float:right;"><a class="a_blue" href="{:U('Index/login')}">已有帐号，立即登录</a></label>
							</div>
						</div>
						<div class="form-group">
							<div class="col-lg-9 col-lg-offset-3">
								<button type="submit" class="col-lg-12 btn btn-primary">确认找回</button>
							</div>
						</div>
					</fieldset>
				</form>
		</div>
	</div>
</div>

{:W('Page/foot')}
<script type="text/javascript">
$.validator.addMethod("phonecn", function(value) {
	var preg = new RegExp(/^1\d{10}$/);
	return preg.test(value);
}, '请输入正确的手机号码！');
$.validator.addMethod("tuijian", function(value) {
	if (value =='') return true;
	else {
		var preg = new RegExp(/^1\d{10}$/);
		return preg.test(value);
	}
}, '请输入正确的手机号码！');
$.validator.addMethod("eaccount", function(value) {
	var preg = new RegExp(/^\w{4,16}$/);
	return preg.test(value);
}, '会员帐号格式错误，字母或数字 4-16位!');

$(function($) {
	var options = {
		success: function (dd) {
			if (dd.status == 1) {
				//成功
				alert(dd.info);
				if (dd.url) window.location.href = dd.url;
				//else window.location.reload();
			}else {
				$("#formErr").html(dd.info);
				$("#formErr").show();
			}
		}
	}
	
	var validate = $("#regform").validate({
		submitHandler:function(form) {
			$("#formErr").hide();
			$(form).ajaxSubmit(options);
			return false;
		},
		rules:{
			account:"eaccount",
			password:{
				required: true,
				rangelength:[6,16]
			},
			repassword:{
				required: true,
				rangelength:[6,16],
				equalTo:'#inputPassword'
			},
			mobile:"phonecn",
			phoneverify:{required: true},
		},
		messages:{
			account:{
				required: "请输入帐号",
				rangelength: "请输入4-16位的帐号",
			},
			password:{
				required: "请输入密码",
				rangelength: "请输入6-16位的密码",
			},
			repassword:{
				required: "请输入确认密码",
				rangelength: "请输入6-16位的密码",
				equalTo:'两次输入密码不一致'
			},
			phoneverify:{required: "请输入手机验证码"},
		}
	});
	
	$("#sendvf").click(function(){
		$("#formErr").hide();
		var thisbtn = $(this);
		var preg = new RegExp(/^1\d{10}$/);
		if (preg.test($("#mobile").val())) {
			//倒计时开始
			thisbtn.attr("disabled", "disabled");
			var wait = 60;
			thisbtn.html("重新发送（"+wait+"）")
			var interval = setInterval(function(){
				wait = --wait;
				if(wait <= 0) {
					thisbtn.html("点击获取验证码")
					thisbtn.removeAttr("disabled");
					clearInterval(interval);
				}else {
					thisbtn.html("重新发送（"+wait+"）")
				}
			}, 1000);
			// 发送验证码
			
			$.ajax({
				cache: false,
				type:  "post",
				url: "{:U('sendVerify')}",
				data: {phone:$("#mobile").val(),check:'1'},
				//async: false, //同步请求, 其它操作必须等待请求完成才可以执行
				success: function(dd) {
					if (dd.status == 1) {
						//成功
						$("#formErr").hide();
					}else {
						$("#formErr").html(dd.info);
						$("#formErr").show();
						thisbtn.html("点击获取验证码")
						thisbtn.removeAttr("disabled");
						clearInterval(interval);
					}
				}
			});
			
		}else {
			if ($("#mobile-error").length>0) {
				$("#mobile-error").show();
			}else {
				$("#mobile").after('<label id="mobile-error" class="error" for="mobile" style="display: inline-block;">请输入正确的手机号码！</label>');
			}
		}
		
		return false;
	});
});
function imgClick() {
	$("#verifyIMG").attr('src',"{:U('Index/verify')}?"+ Math.random());
}

</script>
</body>
</html>